본문으로 건너뛰기

clsx 라이브러리 활용법

React 애플리케이션을 개발할 때, CSS 클래스를 동적으로 적용하는 것은 매우 중요한 작업 중 하나입니다. 이때, 조건에 따라 여러 클래스를 깔끔하게 적용할 수 있는 도구로 clsx 라이브러리를 소개합니다. clsx는 간단하고 직관적인 방법으로 클래스를 결합할 수 있게 해줍니다.

clsx의 기본 사용법​

clsx는 여러 개의 클래스를 조건에 따라 적용할 때 매우 유용합니다. 먼저 설치부터 시작해보겠습니다.

설치 방법​

npm install clsx

기본 사용 예시​

clsx를 사용하면, 조건에 따라 CSS 클래스를 적용할 수 있습니다. 다음은 기본적인 예제입니다.

import clsx from 'clsx';

function MyComponent({ isActive, isDisabled }) {
  return (
    <button className={clsx('btn', { 'btn-active': isActive, 'btn-disabled': isDisabled })}>
      Click Me
    </button>
  );
}

위 예제에서는 isActive와 isDisabled 상태에 따라 'btn-active'와 'btn-disabled' 클래스를 조건부로 추가합니다.

다양한 조건 처리​

clsx는 다양한 방식으로 조건을 처리할 수 있습니다. 아래 예제들을 통해 자세히 알아보겠습니다.

다중 클래스 적용​

const classes = clsx('btn', 'btn-large', 'btn-primary');

객체를 이용한 조건부 클래스 적용​

const classes = clsx({
  'btn': true,
  'btn-large': size === 'large',
  'btn-primary': type === 'primary',
});

배열을 이용한 클래스 결합​

const classes = clsx(['btn', isPrimary && 'btn-primary', isLarge && 'btn-large']);

결합된 클래스​

const classes = clsx('btn', {
  'btn-large': size === 'large',
  'btn-primary': type === 'primary',
}, 'extra-class');

위와 같이 clsx를 사용하면, 조건에 따라 클래스가 깔끔하게 적용됩니다.

실제 예제​

다음은 clsx를 사용한 실제 예제입니다. Card 컴포넌트에 동적으로 클래스를 적용해 보겠습니다.

import React from 'react';
import clsx from 'clsx';
import './Card.css'; // CSS 파일을 불러옵니다.

function Card({ isFeatured, hasBorder }) {
  return (
    <div className={clsx('card', { 'card-featured': isFeatured, 'card-bordered': hasBorder })}>
      <h2>Title</h2>
      <p>Content goes here...</p>
    </div>
  );
}

export default Card;

여기서 isFeatured와 hasBorder props에 따라 'card-featured'와 'card-bordered' 클래스가 동적으로 추가됩니다.

더 알아보기​

  • CSS 모듈: CSS 모듈을 사용하면 컴포넌트 기반 스타일링이 가능하며, clsx와 함께 사용하면 더욱 강력합니다.
  • Styled-Components: CSS-in-JS 라이브러리로, 동적인 스타일링이 필요한 경우 유용합니다.
  • React의 조건부 렌더링: 조건부로 컴포넌트를 렌더링하는 다양한 방법을 익히면 더 효율적인 UI를 만들 수 있습니다.

내용 요약​

clsx 라이브러리는 React 애플리케이션에서 조건부로 CSS 클래스를 적용할 때 매우 유용한 도구입니다. clsx를 사용하면 클래스 이름을 깔끔하고 직관적으로 결합할 수 있으며, 다양한 조건 처리 방식을 지원합니다. 이 글에서는 clsx의 설치 방법, 기본 사용법, 다양한 조건 처리 예시, 그리고 실제 예제를 통해 clsx의 활용 방법을 설명했습니다.